<template>
  <div class="article-detail-page">
    <!-- 主体内容区 -->
    <el-main class="article-container">
      <!-- 图书信息卡片 -->
      <el-card class="article-card" shadow="hover">
        <!-- 标题区域 -->
        <div class="article-title">
          {{ notice.name }}
        </div>

        <!-- 元信息（作者、时间） -->
        <div class="article-meta">
          <span class="meta-item author">
            发布人：
            {{ users.find(v => v.id == notice.userId)?.name }}
          </span>
          <span class="meta-divider"></span>
          <span class="meta-item time">
            发布时间：
            {{ notice.time }}
          </span>
        </div>

        <!-- 内容分隔线 -->
        <el-divider></el-divider>

        <!-- 图书内容 -->
        <div class="article-content" v-html="notice.content"></div>
      </el-card>

      <!-- 底部操作区 -->
      <div class="article-actions">
        <el-button
            type="text"
            icon="el-icon-arrow-left"
            @click="handleBack"
        >
          返回
        </el-button>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: 'ArticleDetailPage',
  data() {
    return {
      // 图书数据（实际项目从接口获取）
      id: this.$route.query.id,
      notice: {},
      users: []
    }
  },
  created() {
    this.load()
  },
  methods: {
    load(){
      this.$request.get("/notice/" + this.id).then(res => {
        this.notice = res.data
      })

      this.$request.get("/user/selectAll").then(res => {
        this.users = res.data
      })
    },
    // 返回上一页
    handleBack() {
      this.$router.go(-1) // 返回历史记录上一页
      // 或跳转到指定列表页：this.$router.push('/article/list')
    }
  }
}
</script>

<style scoped>
/* 页面基础样式 */
.article-detail-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

/* 图书容器 */
.article-container {
  max-width: 800px; /* 限制内容宽度，提升阅读体验 */
  width: 100%;
  margin: 0 auto;
  padding: 30px 20px;
  flex: 1;
}

/* 图书卡片 */
.article-card {
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 30px 40px;
}

/* 标题样式 */
.article-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  line-height: 1.5;
  margin-bottom: 20px;
  text-align: center;
}

/* 元信息（作者、时间） */
.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
  margin-bottom: 20px;
}
.meta-item {
  display: flex;
  align-items: center;
}
.meta-item i {
  margin-right: 5px;
  font-size: 14px;
}
.meta-divider {
  margin: 0 10px;
  color: #e5e6eb;
}

/* 图书内容 */
.article-content {
  color: #303133;
  font-size: 16px;
  line-height: 1.8;
  padding: 10px 0;
}
/* 内容中的标题样式 */
.article-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 16px;
  color: #1f2329;
}
/* 内容中的段落样式 */
.article-content p {
  margin: 16px 0;
}
/* 内容中的代码块样式 */
.article-content pre {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 16px;
  overflow-x: auto;
  margin: 16px 0;
}
.article-content code {
  font-family: monospace;
  font-size: 14px;
  color: #e53935;
}

/* 底部操作区 */
.article-actions {
  margin-top: 20px;
  text-align: center;
}
.article-actions .el-button {
  color: #409eff;
}
.article-actions .el-button:hover {
  color: #3391e8;
}
</style>
